<template>
  <div class="overflow-hidden w-full shadow-lg h-full">
    <VueOfficeExcel
      :src="fileStore.curFileInfo.url"
      style="height: 80vh; width: 100%"
      @rendered="loadHandle"
    />
  </div>
</template>

<script setup>
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import { useFileStore, useFlagStore } from '@/stores'
const fileStore = useFileStore()
const flagStore = useFlagStore()
onMounted(() => {
  flagStore.setPreviewSpinner(true)
})
const loadHandle = () => {
  flagStore.setPreviewSpinner(false)
  const resizeEvent = new Event('resize')
  nextTick(() => {
    window.dispatchEvent(resizeEvent)
  })
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>

<style lang="scss"></style>
